<template>
  <div class="push">
    <div class="push-form">
      <div class="push-input">
        <img class="icon" src="~@/assets/img/push_icon_phone.png"/>
        <input placeholder="请输入手机号码" v-model="mobile_phone"/>
      </div>
      <div class="push-code">
        <div class="push-input">
          <img class="icon" src="~@/assets/img/push_icon_code.png"/>
          <input placeholder="请输入验证码" v-model="sms_code"/>
        </div>
        <div class="push-send" @click="sendCode" :class="{disabled: time !== 0}">{{codeBtn}}</div>
      </div>
      <div class="push-btn" @click="login"></div>
      <div class="push-hint" @click="toProtocol">《用户服务与隐私协议》</div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'push',
  computed: {
    ...mapGetters({
      isIos: 'isIos',
      appname: 'global/appname'
    }),
    codeBtn () {
      if (this.time === 0) {
        return '获取验证码'
      } else {
        return `${this.time}S后重发`
      }
    },
    param () {
      return {
        terminal_type: this.isIos ? 'IOS' : 'ANDROID'
      }
    }
  },
  created () {
    // 修改统计信息为 推送
    this.$store.dispatch('global/setInfo', {source_app: 'push'})

    // 自己服务器统计
    this.$api.get('offline/in_stats', this.param)

    // google统计
    window.ga && window.ga('send', 'event', this.appname, '落地页', '进入落地页')
  },
  data () {
    return {
      mobile_phone: '',
      sms_code: '',
      time: 0,
      isLogining: false // 是否正在登录
    }
  },
  methods: {
    countdown () { // 倒计时
      if (this.time === 0) return
      this.time --
      setTimeout(() => {
        this.countdown()
      }, 1000)
    },
    toProtocol () { // 跳转到协议
      this.$router.push('protocol')
    },
    sendCode () { // 发送验证码
      if (this.time !== 0) return
      if (this.mobile_phone === '') {
        this.$toast({message: '请先输入手机号', position: 'bottom'})
        return
      }
      window.ga && window.ga('send', 'event', this.appname, '落地页', '发生短信')
      this.time = 60
      this.countdown()
      this.$api.get(`sms/${this.mobile_phone}`).then(req => {
        this.$toast({message: '发生成功', position: 'bottom'})
      }).catch(() => {
        this.$toast({message: '发生失败,请稍后重试', position: 'bottom'})
      })
    },
    login () {
      window.ga && window.ga('send', 'event', this.appname, '落地页', '点击下载拿钱')
      this.$api.get('offline/click_stats', this.param)
      if (this.isLogining) return
      this.isLogining = true
      let param = {
        source_app: 'com.zsb.return',
        mobile_phone: this.mobile_phone,
        sms_code: this.sms_code
      }
      this.$api.post('offline/login', param).then(req => {
        this.isLogining = false
        if (req.code === 1002) { // 1002为登录成功 1000 为登录失败
          this.$api.get('offline/success_stats', this.param)
          window.ga && window.ga('send', 'event', this.appname, '落地页', '登录/注册成功')
          if (this.isIos) { // 如果是Ios的话跳转appstore
            window.location.href = 'https://itunes.apple.com/cn/app/id1241610944?mt=8'
          } else {
            // 修改统计信息未 推广-Android
            this.$store.dispatch('global/setInfo', {source_app: 'push_android'})
            this.$router.push('/')
          }
        } else {
          this.$toast({message: '验证码错误,请重试', position: 'bottom'})
        }
      }).catch(() => {
        this.isLogining = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.push {
  width: 100vw;
  height: calc(100vw / 750 * 1507);
  background: url('~@/assets/img/push_bg.png') no-repeat;
  background-size: 100vw auto;
  .push-form{
    padding-top: 83vw;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    .push-code{
      margin-top: 6vw;
      width: calc(75vw + 20px);
      display: flex;
      .push-input{
        width: 40vw;
      }
      .push-send{
        margin-left: 5vw;
        width: 30vw;
        background: #fcda3a;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fd7949;
        font-size: 13px;
        &.disabled{
          opacity: .5;
        }
      }
    }
    .push-btn {
      margin-top: 10vw;
      width: calc(75vw + 20px);
      height: calc((75vw + 20px) * 88 / 570);
      background: url('~@/assets/img/push_btn.png') no-repeat;
      background-size: calc(75vw + 20px) auto;
    }
    .push-hint{
      margin-top: 3vw;
      color: #ffc7cb;
    }
    .push-input{
      width: 75vw;
      background: white;
      border-radius: 20px;
      padding: 10px 5px 10px 15px;
      display: flex;
      align-items: center;
      .icon {
        width: 15px;
        height: 15px;
      }
      input {
        margin-left: 8px;
        width: 100%;
        border: none;
        font-size: 14px;
        background: transparent;
      }
    }
  }
}
</style>


